<template>
  <div class="box">
    <div class="searcharea">
      <!-- 搜索 -->
      <el-row>
        <el-col :span="24">
          <div class="query">
            <el-form :inline="true" :model="queryProductionLineParam" class="demo-form-inline">
              <el-form-item label="产线名称">
                <el-input
                  v-model="queryProductionLineParam.ProductionLineName"
                  placeholder="请输入"
                  clearable
                  style="width: 200px"
                />
              </el-form-item>

              <el-form-item>
                <el-button type="primary" :icon="Search" @click="SearchProductionLine()">搜索</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-col>
      </el-row>
    </div>

    <div class="contentareamax">
      <el-row :gutter="24">
        <!-- 左边选择栏 -->
        <el-col :span="4" class="leftcontentarea grid-content ep-bg-purple">
          <span>车间列表 </span>
          <el-divider content-position="left">快速选择</el-divider>
          <div class="s">
            <!-- <el-input v-model="filterText" placeholder="请输入" /> -->

            <el-scrollbar max-height="400px">
              <p
                v-for="item in WorkshopinfoOptions"
                :key="item.key"
                :class="['scrollbar-demo-item', { selected: isSelected(item) }]"
                @click="selectScrollbarItem(item)"
              >
                {{ item.workshopName }}
              </p>
            </el-scrollbar>
          </div>
        </el-col>

        <!-- 表格 -->
        <el-col :span="20" class="rightcontentarea">
          <div class="grid-content ep-bg-purple">
            <!-- 功能按钮 -->
            <el-row>
              <el-col :span="24">
                <div class="functionbutton">
                  <el-button type="primary" plain @click="addProductionLine()">添加</el-button>
                  <el-button type="danger" plain @click="batchDeletionProductionLine()">批量删除</el-button>
                </div>
              </el-col>
              <el-dialog v-model="centerDialogVisible" title="添加产线" width="30%" align-center>
                <el-form
                  ref="CreateProductionLineForm"
                  :model="CreateProductionLineForm"
                  :rules="CreateProductionLineRules"
                  label-width="auto"
                  style="padding: 20px"
                >
                  <el-form-item label="产线编号">
                    <el-input v-model="CreateProductionLineForm.ProductionLineNo" placeholder="不输入则自动生成">
                    </el-input>
                  </el-form-item>
                  <el-form-item prop="ProductionLineName" label="产线名称">
                    <el-input v-model="CreateProductionLineForm.ProductionLineName" placeholder="请输入产线名称">
                    </el-input>
                  </el-form-item>

                  <el-form-item label="负责人" prop="UserId">
                    <el-select v-model="CreateProductionLineForm.UserId" filterable placeholder="请选择" clearable>
                      <el-option
                        v-for="option in UserinfoOptions"
                        :key="option.key"
                        :label="option.userName"
                        :value="option.id"
                      />
                    </el-select>
                  </el-form-item>

                  <el-form-item label="车间" prop="WorkshopId">
                    <el-select v-model="CreateProductionLineForm.WorkshopId" filterable placeholder="请选择" clearable>
                      <el-option
                        v-for="option in WorkshopinfoOptions"
                        :key="option.key"
                        :label="option.workshopName"
                        :value="option.id"
                      />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="面积">
                    <el-input v-model="CreateProductionLineForm.Area" placeholder="请输入"> </el-input>
                  </el-form-item>
                </el-form>

                <template #footer>
                  <div class="dialog-footer">
                    <el-button @click="centerDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="CreateProductionLineDialog()">确认</el-button>
                  </div>
                </template>
              </el-dialog>
            </el-row>

            <!-- 数据表格 -->
            <el-row>
              <el-col :span="24">
                <div class="table">
                  <el-table
                    v-loading="tableloading"
                    :data="tableData"
                    border
                    style="width: 100%"
                    max-height="400px"
                    :selection="selectedRows"
                    @selection-change="handleSelectionChange"
                    @row-click="getRowkey"
                    show-overflow-tooltip
                    empty-text="暂无数据"
                  >
                    <el-table-column type="selection" width="55" />
                    <el-table-column type="index" label="序号" />
                    <el-table-column prop="productionLineNo" label="产线编码" width="180" />
                    <el-table-column prop="productionLineName" label="产线名称" />
                    <el-table-column prop="workshop.workshopNo" label="车间编码" />
                    <el-table-column prop="workshop.workshopName" label="车间名称" />
                    <el-table-column prop="user.userName" label="负责人" />
                    <el-table-column prop="creator" label="创建人" />
                    <el-table-column prop="updator" label="修改人" />
                    <el-table-column prop="createtime" label="创建时间" width="180" :formatter="formatColumnTime" />
                    <el-table-column prop="updateDate" label="更新时间" width="180" :formatter="formatColumnTime" />
                    <el-table-column fixed="right" label="操作" width="140">
                      <template #default="scope">
                        <el-button type="danger" plain size="small" @click="DeleteProductionLineSingle(scope.row.id)">
                          删除
                        </el-button>

                        <el-button type="primary" plain size="small" @click="UpdateProductionLine(scope.row)"
                          >更新</el-button
                        >
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-col>

              <el-dialog v-model="UpdateDialogVisible" title="修改产线" width="30%" align-center>
                <el-form
                  ref="UpdateProductionLineForm"
                  :model="UpdateProductionLineForm"
                  :rules="CreateProductionLineRules"
                  label-width="auto"
                  style="padding: 20px"
                >
                  <el-form-item label="产线编号">
                    <el-input
                      v-model="UpdateProductionLineForm.ProductionLineNo"
                      disabled
                      placeholder="不输入则自动生成"
                    >
                    </el-input>
                  </el-form-item>
                  <el-form-item prop="ProductionLineName" label="产线名称">
                    <el-input v-model="UpdateProductionLineForm.ProductionLineName" placeholder="请输入产线名称">
                    </el-input>
                  </el-form-item>

                  <el-form-item label="负责人" prop="UserId">
                    <el-select v-model="UpdateProductionLineForm.UserId" filterable placeholder="请选择" clearable>
                      <el-option
                        v-for="option in UserinfoOptions"
                        :key="option.key"
                        :label="option.userName"
                        :value="option.id"
                      />
                    </el-select>
                  </el-form-item>

                  <el-form-item label="车间" prop="WorkshopId">
                    <el-select v-model="UpdateProductionLineForm.WorkshopId" filterable placeholder="请选择" clearable>
                      <el-option
                        v-for="option in WorkshopinfoOptions"
                        :key="option.key"
                        :label="option.workshopName"
                        :value="option.id"
                      />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="面积">
                    <el-input v-model="UpdateProductionLineForm.Area" placeholder="请输入"> </el-input>
                  </el-form-item>
                </el-form>

                <template #footer>
                  <div class="dialog-footer">
                    <el-button @click="UpdateDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="UpdateProductionLineDialog()">确认</el-button>
                  </div>
                </template>
              </el-dialog>
            </el-row>

            <!-- 分页 -->
            <el-row>
              <el-col :span="24">
                <div class="demo-pagination-block" style="display: flex; justify-content: flex-end">
                  <el-config-provider :locale="zhCn">
                    <el-pagination
                      v-model:current-page="queryProductionLineParam.PageIndex"
                      v-model:page-size="queryProductionLineParam.PageSize"
                      :page-sizes="[100, 200, 300, 400]"
                      :small="false"
                      :disabled="false"
                      :background="true"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="queryProductionLineParam.totalCount"
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                    >
                    </el-pagination>
                  </el-config-provider>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script >
import { Search } from '@element-plus/icons-vue'

import { formatTime, capitalizeFirstLetter } from '../../utils/index'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import { ElMessageBox, ElNotification } from 'element-plus'
import { ApiGetBasicData_UserinfoPageListAsync } from '@/api/basic/basicDataUserinfoApi'

import {
  ApiGetShopfloor_ProductionLinePageListAsync,
  ApiDeletionShopfloor_ProductionLineAsync,
  ApiCreateShopfloor_ProductionLineAsync,
  ApiUpdateShopfloor_ProductionLineAsync
} from '../../api/shopfloor/ShopfloorProductionLineApi'

import { ApiGetShopfloor_WorkshopinfoPageListAsync } from '../../api/shopfloor/ShopfloorWorkshopinfoApi'

export default {
  name: 'ProductionLineView',
  data() {
    return {
      filterText: '',
      selectedItem: null, // 用于存储当前选中的项
      count: 3,
      WorkshopinfoOptions: [],
      UserinfoOptions: [],
      tableloading: false,
      UpdateDialogVisible: false,
      UpdateProductionLineForm: {},
      CreateProductionLineForm: {},
      CreateProductionLineRules: {
        UserId: [{ required: true, trigger: 'blur', message: '负责人不能为空' }],
        WorkshopId: [{ required: true, trigger: 'blur', message: '车间不能为空' }],
        ProductionLineName: [{ required: true, trigger: 'blur', message: '产线名称不能为空' }]
      },
      ruleForm: {
        name: ''
      },
      centerDialogVisible: false,
      selectedRows: [], // 存储选中的行数据
      queryProductionLineParam: {
        ProductionLineName: null,
        WorkshopId: null,
        PageIndex: 1,
        PageSize: 100,
        totalCount: 11
      },
      queryUserinfoParam: {
        PageIndex: 1,
        PageSize: 100,
        totalCount: 11
      },
      queryWorkshopinfoParam: {
        PageIndex: 1,
        PageSize: 100,
        totalCount: 11
      },
      tableData: [] // 表格数据
    }
  },
  watch: {
    filterText: function (val) {
      this.$refs.treeRef.filter(val)
    }
  },
  setup() {
    return {
      Search,
      zhCn
    }
  },
  created() {
    this.SearchProductionLine()
    ApiGetShopfloor_WorkshopinfoPageListAsync(this.queryWorkshopinfoParam).then((res) => {
      this.WorkshopinfoOptions = res.data.data
      this.queryWorkshopinfoParam.PageIndex = res.data.pageIndex
      this.queryWorkshopinfoParam.PageSize = res.data.pageSize
      this.queryWorkshopinfoParam.totalCount = res.data.totalCount
    })
  },
  methods: {
    selectScrollbarItem(item) {
      if (this.isSelected(item)) {
        // 如果当前项已经被选中，则取消选中状态
        this.selectedItem = null
        this.queryProductionLineParam.WorkshopId = null
      } else {
        // 否则设置为选中状态
        this.selectedItem = item
        this.queryProductionLineParam.WorkshopId = item.id
      }
      this.SearchProductionLine() // 更新数据
    },
    isSelected(item) {
      // 判断当前项是否被选中
      return this.selectedItem === item
    },
    //确认更新
    UpdateProductionLineDialog() {
      this.$refs.UpdateProductionLineForm.validate((valid) => {
        if (valid) {
          ApiUpdateShopfloor_ProductionLineAsync(this.UpdateProductionLineForm).then((res) => {
            if (res.data.data) {
              ElNotification({
                message: '更新成功',
                offset: 100,
                type: 'success',
                duration: 2000
              })
              this.UpdateDialogVisible = false
              this.SearchProductionLine()
            }
          })
        }
      })
    },
    //更新产线
    UpdateProductionLine(res) {
      this.UpdateDialogVisible = true
      this.UpdateProductionLineForm = capitalizeFirstLetter(res)
      // 获取负责人信息
      ApiGetBasicData_UserinfoPageListAsync(this.queryUserinfoParam).then((res) => {
        this.UserinfoOptions = res.data.data
        this.queryUserinfoParam.PageIndex = res.data.pageIndex
        this.queryUserinfoParam.PageSize = res.data.pageSize
        this.queryUserinfoParam.totalCount = res.data.totalCount
      })

      //获取车间信息
      ApiGetShopfloor_WorkshopinfoPageListAsync(this.queryWorkshopinfoParam).then((res) => {
        this.WorkshopinfoOptions = res.data.data
        this.queryWorkshopinfoParam.PageIndex = res.data.pageIndex
        this.queryWorkshopinfoParam.PageSize = res.data.pageSize
        this.queryWorkshopinfoParam.totalCount = res.data.totalCount
      })
    },
    //删除产线
    DeleteProductionLineSingle(res) {
      this.selectedRows = []
      this.selectedRows.push(res)
      this.batchDeletionProductionLine()
    },
    //添加产线
    CreateProductionLineDialog() {
      this.$refs.CreateProductionLineForm.validate((valid) => {
        if (valid) {
          ApiCreateShopfloor_ProductionLineAsync(this.CreateProductionLineForm).then((res) => {
            if (res.data.data) {
              ElNotification({
                message: '添加产线成功',
                offset: 100,
                type: 'success',
                duration: 2000
              })
              this.centerDialogVisible = false
              this.SearchProductionLine()
            }
          })
        }
      })
    },

    //获取用户选择项
    handleSelectionChange(select) {
      // 提取传递过来的对象中的"id"字段，并存储到this.selectedRows中
      this.selectedRows = select.map((item) => item.id)
    },
    //添加产线
    addProductionLine() {
      this.CreateProductionLineForm = {}
      this.centerDialogVisible = true

      // 获取负责人信息
      ApiGetBasicData_UserinfoPageListAsync(this.queryUserinfoParam).then((res) => {
        this.UserinfoOptions = res.data.data
        this.queryUserinfoParam.PageIndex = res.data.pageIndex
        this.queryUserinfoParam.PageSize = res.data.pageSize
        this.queryUserinfoParam.totalCount = res.data.totalCount
      })

      //获取车间信息
      ApiGetShopfloor_WorkshopinfoPageListAsync(this.queryWorkshopinfoParam).then((res) => {
        this.WorkshopinfoOptions = res.data.data
        this.queryWorkshopinfoParam.PageIndex = res.data.pageIndex
        this.queryWorkshopinfoParam.PageSize = res.data.pageSize
        this.queryWorkshopinfoParam.totalCount = res.data.totalCount
      })
    },
    //指删除产线
    batchDeletionProductionLine() {
      if (this.selectedRows.length < 1) {
        ElNotification({
          message: '请先选择一条或更多信息',
          type: 'warning',
          offset: 100,
          duration: 2000
        })
        return
      }
      ElMessageBox.confirm('确实要删除这些信息吗?', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          ApiDeletionShopfloor_ProductionLineAsync(this.selectedRows)
            .then((res) => {
              if (res.data.data) {
                ElNotification({
                  message: '删除成功',
                  offset: 100,
                  type: 'success',
                  duration: 2000
                })
                this.selectedRows = []
                this.SearchProductionLine()
              }
            })
            .catch(() => {
              this.selectedRows = []
            })
        })
        .catch(() => {
          this.selectedRows = []
        })
    },
    //时间转换
    formatColumnTime(row, column, time) {
      return formatTime(time)
    },

    //每页条数
    handleSizeChange(e) {
      this.queryProductionLineParam.PageSize = e
      this.SearchProductionLine()
    },

    // 搜索
    SearchProductionLine() {
      this.tableloading = true
      ApiGetShopfloor_ProductionLinePageListAsync(this.queryProductionLineParam)
        .then((res) => {
          this.tableData = res.data.data
          this.queryProductionLineParam.PageIndex = res.data.pageIndex
          this.queryProductionLineParam.PageSize = res.data.pageSize
          this.queryProductionLineParam.totalCount = res.data.totalCount
        })
        .finally(() => {
          this.tableloading = false
        })
    }
  }
}
</script>

<style lang="less"  scoped>
@import '../../assets/globle/index.css';
.scrollbar-demo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background: #e6e8eb;
  color: var(--el-color-primary);
  transition: box-shadow 0.5s ease; /* 添加过渡效果 */
  cursor: pointer;
}

.scrollbar-demo-item:hover {
  box-shadow: 0 0 6px #0e0e0e; /* 设置鼠标悬停时的阴影样式 */
}

.scrollbar-demo-item.selected {
  background-color: #868686 !important;
  color: #fcfcfc !important;
}

.contentareamax {
  //上、右、下、左
  padding: 2px 2px 2px 15px;
}
.leftcontentarea {
  margin-top: 18px;
  // margin-right: 10px;
  // background-color: #fff;
  padding: 20px 0px 12px 2px;
  span {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
  }
}

.rightcontentarea {
  margin-top: 18px;
  // background-color: #fff;
  padding: 2px 2px 2px 15px;
  .functionbutton {
    padding: 20px 2px 0px 20px;
  }
  .table {
    padding: 0px 20px 0px 20px;
  }
  .demo-pagination-block {
    padding: 12px 22px 12px 2px;
    right: 0;
  }
}

.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.ep-bg-purple {
  background-color: #ffffff; /* 修改为你想要的背景颜色 */
}
</style>